<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span>这是文本</span>
		<span>这是一个新文本</span>
		<button type="button" onclick="add(this)">JS对象获取this</button>
		<button id="btn_jq" type="button">JQ对象获取this</button>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
				html元素有两种对象形式
					JS对象形式
						document.getElementById()：这一类方法都是获取JS对象
					JQ对象形式
						$(选择器)：获取的都是JQ对象
					转换主要针对this关键字
						JQ转JS：JQ对象[0]
						JS转JQ：$(JS对象)
			*/
		   $(function() {
			   let span = $("span");
			   console.log(span);
			   console.log(span[0]);
		   })
		   
		   function add(self) {
			   console.log(self);
			   console.log(this);
			   console.log($(self));
			   console.log($(this));
		   }
		   
		   $("#btn_jq").click(function() {
			   console.log(this);
			   console.log($(this))
		   });
		   
		   console.log("这是JS对象");
		   console.log(document.getElementsByTagName("span")[0]);
		   //这两个span中的文本，指定为哈哈
		   $("span").text("哈哈");
		   console.log($("span").length);
		   $("span").each(function(a, b, c, d) {
			   console.log(a, b, c, d);
		   });
		</script>
	</body>
</html>
